<template>
  <div>
    <el-input v-model="articleStore.searchField" maxlength="15" placeholder="发现更多精彩..." >
      <template #suffix>
        <svg @click="handleSearch" class="icon icon-search">
          <use xlink:href="#icon-search"></use>
        </svg>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import router from "@/router/router.js";
import {useArticleStore} from "@/store/articleStore.js";
import {ref} from "vue";
const articleStore = useArticleStore();
const handleSearch = async ()=>{
  if (!articleStore.searchField.trim()){
    articleStore.searchField = ''
    return
  }
  articleStore.articleList = []
  await router.push(`/search/${articleStore.searchField}`)
  await articleStore.getArticleList()
}
</script>

<style lang="scss" scoped>

.icon-search{
  cursor: pointer;
  font-size: 1.5rem;
  color: #409eff;
}
</style>